<template>
  <view class="content">
    <!-- 页面加载 loading  start -->
    <fu-loading v-if="isShowLoading"></fu-loading>
    <!-- 页面加载 loading  end -->
    <!-- 已经领取的优惠卷列表 start -->
    <view v-else>
      <block v-for="(item, index) in list" :key="index">
        <view class="margin-top-sm">
          <jd-coupon
            :discountPrice="item.money"
            :name="item.name"
            :time="item.end_time"
            :limit="item.min_order_money"
            :isUse="item.is_receive == 1"
            @click="receive(item.id, index, item.is_receive)"
            :item='item'
          ></jd-coupon>
        </view>
      </block>
    </view>
    <!-- 已经领取的优惠卷列表 end -->
    <!-- 暂无优惠卷 start -->
    <fu-empty-ui v-if="list.length == 0 && !isShowLoading" emptyImage="coupons"></fu-empty-ui>
    <!-- 暂无优惠卷 end -->
    <!-- 网络检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络检测 end -->
  </view>
</template>

<script>
import jdCoupon from '../../components/jd-coupon/jd-coupon.vue';
var _self;
export default {
  components: {
    jdCoupon
  },
  data() {
    return {
      isShowLoading: true, //是否显示页面加载
      list: [] ,//已经领取的优惠卷列表
			isLoading: false, // 防连点
    };
  },
  /**
   * @description  页面初始化加载优惠卷列表
   */
  onLoad() {
    this.setNavigationBarTitle(this.i18n['领取优惠券'])
    _self = this;
    this.get_coupon_type_list();
  },
  methods: {
    /**
     * @description 获取已经领取的优惠卷列表
     * @param {Object} value true/false 是否显示页面loading
     */
    get_coupon_type_list(value) {
      var user = uni.getStorageSync('USER_INFO');
      var data = {};
      data.method = 2;
      if (user.id > 0) {
        data.user_id = user.id;
      }
      if (!value) {
        this.isShowLoading = true;
      }
      this.$api
        .get(global.apiUrls.getCouponList, data)
        .then(res => {
          this.isShowLoading = false;
          if (res.data.code == 1) {
            res.data.data.forEach(item => {
              item.share = false;
            });
            _self.list = res.data.data;
          }
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          this.isShowLoading = false;
        });
    },
    /**
     * @description 领取优惠卷
     * @param {Object} cid  优惠卷id
     * @param {Object} index  优惠卷序号
     * @param {Object} is_receive  判断是否已经领取优惠卷
     */
    receive(cid, index, is_receive) {
      console.log(cid, index, is_receive);
      // 前端判断已领取得点击失效
      if (is_receive == 1) {
        return false;
      }
			if (this.isLoading) return;
			this.isLoading = true;
      this.$api
        .post(global.apiUrls.postReceiveCoupon, {
          cid: cid
        })
        .then(res => {
          this.$message.info(res.data.msg)
          if (res.data.code == 1) {
            this.list[index].is_receive = 1;
          }
					this.isLoading = false;
        }).catch(err => {
					this.isLoading = false;
				});
    }
  },
  /**
   * @description 下拉刷新
   */
  onPullDownRefresh() {
    this.get_coupon_type_list(true);
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 24rpx;

  /* 已经领取的优惠卷列表 start */
  .coupon-card {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 178rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    background-color: #ffffff;

    .card-money {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 178rpx;
      padding: 30rpx 10rpx;
      border-radius: 10rpx 0 0 10rpx;
      text-align: center;
      color: #ffffff;
      width: 280rpx;
      .money-size {
        font-size: 56rpx;
      }

      .money-xl {
        font-size: 54rpx;
      }

      .money-scoped {
        font-size: 24rpx;
      }
    }

    /* 优惠卷详情  start */
    .card-condition {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 4;
      padding: 0 10rpx;
      .condition-use {
        margin-top: 16rpx;
        font-size: 34rpx;
        font-weight: 700;
      }

      .condition-time {
        font-size: 24rpx;
        color: #949090;
      }
    }

    /* 优惠卷详情  end */
    /* 优惠卷操作按钮 start */
    .card-action {
      display: flex;
      align-items: center;
      flex: 1;
      height: 100%;
      /* padding-right: 10rpx; */
      justify-content: flex-end;
      .action-btn {
        height: 60rpx;
        width: 120rpx;
        padding: 0;
        border-radius: 10rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 60rpx;
        color: #ffffff;
        background: $theme;
      }
    }

    /* 优惠卷操作按钮 end */
  }

  /* 已经领取的优惠卷列表 end */
}
/* 领取前的颜色 start */
.get-after {
  background: #949090 !important;
}
/* 领取前的颜色 end */
/* 领取后的颜色 start */
.get-before {
  background: $bgtheme;
}
/* 领取后的颜色 end */
</style>
